<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--jquery CDN 百度 -->
	<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<style type="text/css">
		canvas{
			border:1px solid red;
		}
	</style>
</head>
<body>
	<canvas id="c" width="900" height="600"></canvas>

	<script type="text/javascript">
		var ctx = c.getContext('2d');
		//clearRect
		// ctx.beginPath();
		// ctx.arc(100,100,50,0,2*Math.PI,false);
		// ctx.stroke();
		// ctx.closePath();
		// ctx.clearRect(0,0,120,120);


		c.onmousedown = function () {
			var x1,y1;
			x1 = event.offsetX;
			y1 = event.offsetY;


			c.onmousemove = function () {
				var x2,y2,r;
				x2 = event.offsetX;
				y2 = event.offsetY;
				r = Math.sqrt(Math.pow((x1-x2),2)+Math.pow((y1-y2),2));
				ctx.beginPath();
				ctx.arc(x1,y1,r,0,2*Math.PI);
				// 四个参数是计算出来的
				ctx.clearRect(x1-r,y1-r,2*r,2*r);
				ctx.stroke();
				ctx.closePath();
			}	
		}

		

		c.onmouseup = function () {
			c.onmousemove = null;
		}
	</script>
</body>
</html>